<template>
  <div id="app">
    <div>
      <div>
        <router-view />
      </div>
      <vue-particles color="#fff"
                     :particleOpacity="0.7"
                     :particlesNumber="60"
                     shapeType="circle"
                     :particleSize="4"
                     linesColor="#fff"
                     :linesWidth="1"
                     :lineLinked="true"
                     :lineOpacity="0.4"
                     :linesDistance="150"
                     :moveSpeed="2"
                     :hoverEffect="true"
                     hoverMode="grab"
                     :clickEffect="true"
                     clickMode="push"
                     class="lizi">
      </vue-particles>
    </div>

  </div>
</template>

<script>
export default {
  name: "App",
  created () {
    //在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem("store") ) {
        this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
    } 

    //在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload",()=>{
        sessionStorage.setItem("store",JSON.stringify(this.$store.state))
    })
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 10px;
  width: 100%;
  height: 100%;
}
#particles-js {
    background-color: #697e92;
    background-size: cover;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

.login {
  width: 550px;
  height: 350px;
  margin-left: 600px;
  margin-top: 150px;
  background-image: rgba(0.5);
  font-size: 30px;
}

</style>
